<!-- 商品列表首页 -->
<template>
  <div>
         <!-- 面包屑部分 -->
      <el-breadcrumb separator="/" class="header">
            <el-breadcrumb-item >首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
       </el-breadcrumb>

     <el-card>
     <!-- 搜索 -->
        <el-input v-model="query" placeholder="请输入内容" class="input"></el-input>
        <el-button icon="el-icon-search" ></el-button>
        <el-button type="success" plain @click="to">添加商品</el-button>

    <!-- 表格 -->
        <el-table
        :data="goods"
        style="width: 100%">
        <el-table-column
            prop="goods_id"
            label="商品 ID"
            width="90">
        </el-table-column>
        <el-table-column
            prop="goods_name"
            label="商品名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="goods_price"
            label="价格"
            width="180">
        </el-table-column>
        <el-table-column
            prop="goods_number"
            label="数量"
            width="180">
        </el-table-column>
         <el-table-column
            prop="goods_weight"
            label="重量"
            width="180">
        </el-table-column>
      </el-table>

      <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
           </el-pagination>
 
    </el-card>
    
<router-view></router-view>
          
  </div>
</template>

<script>
import {getgoods} from "network/goodlist"
export default {
 name:"goodHome",
 created () {
   getgoods( this.query,this.pagenum,this.pagesize).then(res=>{
       console.log(res)
       this.goods=res.data.data.goods
   })
 },
 data () {
     return {
         query:"",
         pagenum:1,
         pagesize:4,
         goods: []
     }
 },
 methods:{
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pagenum=val
       getgoods( this.query,this.pagenum,this.pagesize).then(res=>{
       this.goods=res.data.data.goods
   })
  },
  to(){
       this.$router.push("/goodlist")
  }
 }

}

</script>
<style  scoped>
  .header{
            font-size: 17px;
            margin-bottom: 15px;
        }
        .input{
            margin-left: 15px;
            margin-top: 10px;
            width: 300px;
        }
</style>